<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script>
$(document).ready(function(){
	$( "#dialog-project" ).dialog({
			autoOpen: false,	
			height: 560,
			width: 950,
			show: 'blind',
			hide: 'blind',
			position: 'top',
			modal: true,
			buttons: {
			"Save": function() {
			var validation=$("#form_upsert_project").validationEngine('validate');
				if(validation){
					var myForm = document.createElement("form");
					myForm.method="post" ;
					myForm.action = CI.baseUrl + "index.php/project_controller/save/";
					var myInput = document.createElement("input") ;
					myInput.setAttribute("name", "project-name") ;
					myInput.setAttribute("type", "hidden");
					myInput.setAttribute("value", document.getElementById("project-name").value);
					myForm.appendChild(myInput);
					var myText = document.createElement("input") ;
					myText.setAttribute("name", "project-description") ;
					myText.setAttribute("type", "hidden");
					myText.setAttribute("value",  document.getElementById("project-description").value);
					myForm.appendChild(myText);
					var myId = document.createElement("input") ;
					myId.setAttribute("name", "id") ;
					myId.setAttribute("type", "hidden");
					myId.setAttribute("value",  document.getElementById("project-id").value);
					myForm.appendChild(myId);	
					users = new Array(); 
					users= getSelectedUsers();
					var mySelect = document.createElement("select");
					mySelect.setAttribute("name", "users[]") ;
					mySelect.setAttribute("multiple", "multiple") ;
					for(var i in users){
						option = document.createElement('option');
				 		option.setAttribute("value", users[i]);
		     	 		option.setAttribute('selected', 'selected');
                   		option.innerHTML = users[i];
                   		mySelect.appendChild(option);	 
					}
					myForm.appendChild(mySelect);
					document.body.appendChild(myForm) ;
					myForm.submit() ;
					$( this ).dialog( "close" );
				}	
				},
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			    },
				close: function() {
						//$('.cbox').attr('checked', false);
						//jQuery("#users_list_project").jqGrid(
						//$('#users_list_project input:checkbox').attr('checked',false);
						jQuery("#users_list_project").resetSelection();
						$("#form_upsert_project").validationEngine('hideAll');
						
					}
				});
});			
</script>
<head>		
<script type="text/javascript">

	
	$(document).ready(function(){				
		$("#projects_list").jqGrid({
		   	url:'<?= base_url() ?>index.php/project_controller/getProjects/',
			datatype: "json",
			mtype : "post",
		   	colNames:['Id','Proyect Name', 'Description', 'Creation Date', 'Action'],
		   	colModel:[
		   		{name:'Id',index:'Id', width:150},
		   		{name:'Project Name',index:'Project Name', width:250},
		   		{name:'Description',index:'Description', width:250},
		   		{name:'Creation Date',index:'Creation Date', width:220},
		   		{name:'action', index:'action', width:40, formatter:projectFormatOperations}
		   	],
		   	rowNum:10,
		   	height:400,
		   	rowList:[10,20,30],
		   	pager: '#projects_pager',
		   	sortname: 'id',
		    sortorder: "asc",
		    viewrecords: true,
		    caption:"Projects List"
		});
		jQuery("#projects_list").jqGrid('navGrid','#projects_pager',{edit:false,add:false,del:false, search:false, del:false});
		$("#projects_list").navButtonAdd('#projects_pager', {  
			 caption: "New Project",   
			 title: "Click here to create a new project",   
			 buttonicon: "ui-icon-plusthick",   
			 onClickButton: function() { 
				 emptyProjectFields();
				 $( "#dialog-project" ).dialog( "open" );
			  },   position: "first"});
		
		});

		function emptyProjectFields()
		{
			$("#project-name").val("");
			$("#project-description").val("");
			$("#project-id").val("");
			jQuery("#users_list_project").resetSelection();
		}

		function projectFormatOperations(cellvalue, options, rowObject){
			return 	"<a href='#' onclick=editProject(" + rowObject[0] + ")><img src=" + CI.baseUrl + "/img/edit2.png></img></a>" +
				"<a href='#' onclick=deleteProject(" + rowObject[0] + ")><img src=" + CI.baseUrl + "/img/delete.png></img></a>";
		}

		function deleteProject(idProject){
			if (confirm("Are you sure?")){
			 	var myForm = document.createElement("form");
			 	myForm.method="post" ;
			 	myForm.action = CI.baseUrl + "index.php/project_controller/delete";
			 	var myInput = document.createElement("input") ;
			 	myInput.setAttribute("name", "idProj") ;
			 	myInput.setAttribute("type", "hidden");
			 	myInput.setAttribute("value", idProject);
			 	myForm.appendChild(myInput);
			 	document.body.appendChild(myForm) ;
			 	myForm.submit() ;
			}
		}
		
		function editProject(idProject){
			projectUsers(idProject);
			projectData(idProject);
			$( "#dialog-project" ).dialog( "open" );

		}

		function projectData(idProject){
			$.ajax({
				url: CI.baseUrl + '/index.php/project_controller/get',
				type: 'POST',
				data: {'id': idProject},
				dataType: "json",
				success: function(data){
					editProjectData(data);
				},
				error: function(data){
					alert('error');
				}
			});
		}
		function editProjectData(projectData){
			$("#project-name").val(projectData.name);
			$("#project-description").val(projectData.description);
			$("#project-id").val(projectData.id);
		}

		
		function projectUsers(idProject){
			$.ajax({
				url: CI.baseUrl + '/index.php/project_controller/get_project_users_json',
				type: 'POST',
				data: {'id': idProject},
				dataType: "json",
				success: function(data){
					editProjectUsers(data);
				},
				error: function(data){
					alert('error');
				}
			});
		}
		function editProjectUsers(projectData){
			jQuery("#users_list_project").resetSelection();
			for(var i in projectData){
				jQuery("#users_list_project").jqGrid('setSelection',projectData[i].user_id);	
			}
		}

		
		
	
	
</script>
</head>
<body>
<div class="ui-widget-content">
		<table id="projects_list"></table> 
		<div id="projects_pager"></div>
		<?php $this->load->view('project_upsert_view'); ?>
		</div>
</body>
</html>